<template>
  <div>
    <h2>物流相关信息</h2>
    <div class="logistics-info-header">
      <div class="logistics-info-header-left">
        <div
          class="logistics-status blue"
          :class="{
            red: this.orderInfo.logisticsStatus === 0,
            pink: this.orderInfo.logisticsStatus === 1,
            blue: this.orderInfo.logisticsStatus === 2,
            green: this.orderInfo.logisticsStatus === 3
          }"
        >
         {{status}}
        </div>
        <div class="logistics-company">{{ orderInfo.logisticsCompany }}</div>
        <div class="logistics-no">{{ orderInfo.logisticsNo }}</div>
      </div>
    </div>
    <ul class="logistics-info-list">
      <li v-for="(item, index) in orderInfo.logisticsInfo" :key="index">
        <div class="logistics-info-list-time">{{ item.time }}</div>
        <div class="logistics-info-list-content">{{ item.content }}</div>
      </li>
    </ul>
    <button v-look="orderInfo">查看物流详情</button>
  </div>
</template>

<script>
export default {
  name: 'MyLogistics',
  props: ['orderInfo'],
  // 自定义指令
  directives: {
    look: {
      inserted (el, binding) {
        el.addEventListener('click', function () {
          if (
            binding.value.role === 'admin' ||
            binding.value.role === 'zhangsan' ||
            binding.value.role === 'lisi'
          ) {
            alert('可以查看')
          } else {
            alert('无法查看')
          }
        })
      }
    }
  },
  computed: {
    status () {
      if (this.orderInfo.logisticsStatus === 0) {
        return '未发货'
      } else if (this.orderInfo.logisticsStatus === 1) {
        return '已发货'
      } else if (this.orderInfo.logisticsStatus === 2) {
        return '已签收'
      } else {
        return '未签收'
      }
    }
  }
}
</script>

<style scoped>
.blue {
  color: blue;
}
.undo {
  color: #ccc;
}
.error {
  color: red;
}
.right {
  color: green;
}
</style>
